<template>
	<view class="main">
		<view class="title-box">
			<image src="https://qny.yijiumy.com/icon_sousuo.png" style="width: 26rpx;height: 26rpx; margin-right: 15rpx;" mode=""></image> 大家都在搜索
		</view>
		<view class="search">
			<view class="search-item" v-for="(item,index) in list">
				{{item}}
			</view>
		</view>
	</view>
</template>

<script>
		export default {
			data() {
				return {
					list:['侯爵红葡萄酒','文通冰室','ONEWAY','哇哈哈','阿宽品牌三条拉面']
				}
			},
		}
</script>

<style scoped lang="less">
	.main{
		width: 90%;
		margin:10rpx auto;
		
	}
	.title-box{
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 30rpx;
		color: #333333;
		line-height: 36rpx;
	}
	.search-item{
		width: 30%;
		height: 50rpx;
		background: #E7EEF5;
		border-radius: 25rpx;
		text-align: center;
		line-height: 50rpx;
		margin: 10rpx 0;
		padding: 0 15rpx;
		margin-right: 5%;
		text-overflow: ellipsis;
		overflow: hidden; 
		white-space: nowrap;  
	}
	.search-item:nth-child(3n) {
		// 当n为0时，即表示第一行最后一个元素，不需要右外边距，否则就超出 100%了。
		margin-right: 0 !important;
	}
	.search{
		display: flex;
		// justify-content: space-between;
		flex-wrap: wrap;
	}
</style>